<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="值得买" left-arrow>
      <template #left>
        <van-icon name="circle" size="70" color="black" />
      </template>
      <template #right>
        <van-icon
          name="search"
          size="70"
          class="top"
          color="black"
          @click="toSearch"
        />
        <van-icon name="cart" size="70" class="top" color="black" />
      </template>
    </van-nav-bar>
    <!-- 导航 -->
    <div class="nav">
      <div class="navTop"><span>值得买</span>严选好物 用心生活</div>
      <div class="navMain">
        <van-swipe class="my-swipe" :loop="false" :show-indicators="false">
          <van-swipe-item>
            <template>
              <div class="Item">
                <a
                  class="swipeItem"
                  v-for="(item, index) in buyNavL"
                  :key="index"
                >
                  <div class="ItemP">
                    <img :src="item.picUrl" alt="" />
                  </div>
                  <div>
                    <div class="ItemT">{{ item.mainTitle }}</div>
                    <div class="ItemB">{{ item.viceTitle }}</div>
                  </div>
                </a>
              </div>
            </template>
          </van-swipe-item>
          <van-swipe-item>
            <template>
              <div class="Item">
                <a
                  class="swipeItem"
                  v-for="(item, index) in buyNavR"
                  :key="index"
                >
                  <div class="ItemP">
                    <img :src="item.picUrl" alt="" />
                  </div>
                  <div>
                    <div class="ItemT">{{ item.mainTitle }}</div>
                    <div class="ItemB">{{ item.viceTitle }}</div>
                  </div>
                </a>
              </div>
            </template>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 瀑布流 -->

    <div class="show">
      <div class="showL">
        <div class="showMain" v-for="(item, index) in buyListL" :key="index">
          <img :src="item.picUrl" alt="" class="showP" />
          <p>{{ item.title }}</p>
          <img :src="item.avatar" alt="" class="showAVA" />
          <i>{{ item.nickname }}</i>
          <span><van-icon name="eye" />6</span>
        </div>
      </div>
      <div class="showR">
        <div class="showMain" v-for="(item, index) in buyListR" :key="index">
          <img :src="item.picUrl" alt="" class="showP" />
          <p>{{ item.title }}</p>
          <img :src="item.avatar" alt="" class="showAVA" />
          <i>{{ item.nickname }}</i>
          <span><van-icon name="eye" />6</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqBuyNav, reqBuyList } from "../../api";

export default {
  name: "buy",
  data() {
    return {
      buyNavL: [],
      buyNavR: [],
      buyListL: [],
      buyListR: [],
    };
  },

  methods: {
    onChange(index) {
      this.current = index;
    },
    async getBuyNav() {
      let result = await reqBuyNav();
      this.buyNavL = result.data.navList.slice(0, 8);
      this.buyNavR = result.data.navList.slice(-8);
    },
    async getBuyList() {
      let result = await reqBuyList();
      this.buyListL = result.data.result[0].topics;
      this.buyListR = result.data.result[1].topics;
      console.log(result);
    },
    toSearch() {
      this.$router.push("/search");
    },
  },
  mounted() {
    this.getBuyNav();
    this.getBuyList();
  },
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 5px;
}
.nav {
  box-sizing: border-box;
  width: 100%;
  height: 9rem;
  background: linear-gradient(Tan, white);
  color: #fffff0;
  .navTop {
    padding-top: 0.5rem;
    padding-left: 0.2rem;
  }
  .navTop span {
    font-size: 0.6rem;
    padding-right: 0.1rem;
  }
  .navMain {
    width: 92%;

    margin: 0.3rem auto;
    border-radius: 0.3rem;
    height: 7rem;
  }
}
.my-swipe {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
}
.ItemP {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: white;
  border-radius: 50%;
  border: none;
  margin: 0.3rem;
}
.ItemP img {
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
}
.swipeItem {
  display: inline-block;
  margin: 0.1rem;
  width: 22%;
  height: 2.5rem;
}
.Item {
  display: flex;
  flex-wrap: wrap;
}
.ItemT {
  text-align: center;
  color: black;
}
.ItemB {
  text-align: center;
  color: green;
}

// 瀑布流
.show {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background-color: red;
}
.showL {
  margin: 0 0.5rem;
  display: flex;
  flex-direction: column;
  width: 45%;
  background-color: #ffffee;
}
.showR {
  margin: 0 0.5rem;
  display: flex;
  flex-direction: column;
  width: 45%;
  background-color: #ffffee;
}
.showMain {
  border-radius: 0.5rem;
  margin: 00.1rem 0;
  height: 4.5rem;
  // background-color: red;
}
.showP {
  width: 100%;
  border-radius: 0.5rem;
}
.showAVA {
  border-radius: 50%;
}
</style>
